<template>
  <lay-card>
    <lay-table :columns="columns2" :data-source="dataSource2" size="md" skin='nob'>
      <template #name="{data}">
        <a @click="editBroker(data)" href="javascript:void(0);">
          {{ data.name }}<lay-icon type="layui-icon-edit" style="position: absolute;right: 10px;"></lay-icon>
        </a>
      </template>
      <template #status="{ data }">
        <div v-if="data.status=='running'">
          <lay-badge type="dot" theme="blue" ripple></lay-badge>
          运行中
        </div>
        <div v-if="data.status=='stopped'">
          <lay-badge type="dot"></lay-badge>
          已离线
        </div>
        <div v-if="data.status=='unknown'">
          <lay-badge type="dot"></lay-badge>
          未知
        </div>
      </template>

      <template v-slot:memory="{ data }">
        <lay-progress v-if="data.memory<30" :percent="data.memory" :show-text="true"
                      style="width:100px"></lay-progress>
        <lay-progress v-if="data.memory>=30" theme="orange" :percent="data.memory" :show-text="true"
                      style="width:100px"></lay-progress>
      </template>
      <template v-slot:cpu="{ data }">
        <lay-progress v-if="data.cpu<60" :percent="data.cpu" :show-text="true"
                      style="width:100px"></lay-progress>
        <lay-progress v-if="data.cpu>=60" theme="orange" :percent="data.cpu" :show-text="true"
                      style="width:100px"></lay-progress>
      </template>
    </lay-table>
  </lay-card>
  <lay-layer type="drawer" v-model="modalVisible" title="MQTT Broker配置">
    <lay-result status="failure" describe="开发中..."
                title="提示"></lay-result>
    <!--        <lay-card>-->
    <!--            <lay-button type="primary">保存并重启</lay-button>-->
    <!--            <lay-button type="default" @click="">仅保存</lay-button>-->
    <!--        </lay-card>-->

    <!--        <lay-tab type="card" v-model="currentTab">-->
    <!--            <lay-tab-item v-for="(n, index) in brokerConfig" :title="n.title" :id="index">-->
    <!--                <lay-form :model="brokerForm">-->
    <!--                    <lay-card v-if="n.dynamic_config&&n.dynamic_config.length>0" title="动态生效">-->
    <!--                        <lay-form-item v-for="(item, i) in n.dynamic_config" :label="item.label" :prop="item.prop"-->
    <!--                                       mode="inline">-->
    <!--                            <lay-input :placeholder="item.placeholder"/>-->
    <!--                        </lay-form-item>-->
    <!--                    </lay-card>-->
    <!--                    <lay-card v-if="n.restart_config&&n.restart_config.length>0" title="重启生效">-->
    <!--                        <lay-form-item v-for="(item, i) in n.restart_config" :label="item.label" :prop="item.prop"-->
    <!--                                       mode="inline">-->
    <!--                            <lay-input :placeholder="item.placeholder"/>-->
    <!--                        </lay-form-item>-->
    <!--                    </lay-card>-->
    <!--                </lay-form>-->
    <!--            </lay-tab-item>-->
    <!--        </lay-tab>-->
  </lay-layer>
</template>

<script lang="ts">

import {onMounted, reactive, ref} from "vue";
import {dashboard_nodes} from "../../api/module/api";
import {onUnmounted} from "@vue/runtime-core";

export default {
  setup() {
    const columns2 = [
      {
        title: "名称",
        width: "200px",
        key: "name",
        customSlot: "name"
      }, {
        title: "状态",
        width: "180px",
        key: "status",
        customSlot: "status"
      }, {
        title: "运行时长",
        width: "120px",
        key: "runtime"
      }, {
        title: "版本信息",
        width: "120px",
        key: "version"
      }, {
        title: "进程",
        width: "120px",
        key: "pid"
      }, {
        title: "操作系统内存",
        width: "180px",
        key: "memory",
        customSlot: "memory"
      }, {
        title: "操作系统CPU负载",
        width: "180px",
        key: "cpu",
        customSlot: "cpu"
      }
    ]
    const brokerConfig = ref([
      {
        title: '基础配置',
        dynamic_config: [
          {
            label: 'MaxPacketSize',
            prop: 'MaxPacketSize',
            placeholder: 'MQTT最大消息体字节数'
          },
          {
            label: 'TopicLimit',
            prop: 'TopicLimit',
            placeholder: 'topic数量上限'
          },
        ],
        restart_config: [
          {
            label: 'Host',
            prop: 'host',
            placeholder: 'Broker服务IP地址'
          },
          {
            label: 'Port',
            prop: 'port',
            placeholder: 'Broker服务端口号'
          },
        ]
      },
      {
        title: '企业插件',
        dynamic_config: [
          {
            label: 'Host',
            prop: 'host',
            placeholder: 'Broker服务IP地址'
          },
          {
            label: 'Port',
            prop: 'port',
            placeholder: 'Broker服务端口号'
          },
        ],
        restart_config: [
          {
            label: 'Host',
            prop: 'host',
            placeholder: 'Broker服务IP地址'
          },
          {
            label: 'Port',
            prop: 'port',
            placeholder: 'Broker服务端口号'
          },
        ]
      },
    ])
    const dataSource2 = ref([])
    const modalVisible = ref(false)
    const currentTab = ref(0)
    const brokerForm = reactive({
      host: '',
      port: '',
      bufferSize: '',
      maxPacketSize: '',
      topicLimit: '',
      maxInflight: '',
    })
    let timer;

    const editBroker = (brokerId) => {
      modalVisible.value = true
    }

    onMounted(() => {
      const loadData = async () => {
        const {data} = await dashboard_nodes();
        console.log(data)
        dataSource2.value = data
      };
      loadData()
      timer = setInterval(() => {
        loadData()
      }, 2000)
    })

    onUnmounted(() => {
      console.log("clear timer")
      clearInterval(timer)
    })

    return {
      columns2,
      dataSource2,
      modalVisible,
      brokerForm,
      currentTab,
      brokerConfig,
      editBroker
    }
  }
}
</script>